<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader class="product_tabs" title="模块儿功能统计" hidden-breadcrumb></PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <div class="acea-row row-between-wrapper mb20">
                <div class="header-title">
                    页面记录统计
                </div>
                <div class="acea-row">
                    <DatePicker
                        :editable="false"
                        :clearable="false"
                        @on-change="onchangeTime"
                        :value="timeVal"
                        format="yyyy/MM/dd"
                        type="datetimerange"
                        placement="bottom-start"
                        placeholder="自定义时间"
                        style="width: 200px"
                        class="mr15"
                        :options="options"
                    ></DatePicker>
                    <Button type="primary" class="mr15" @click="onSeach">查询</Button>
                    <!-- <Button type="primary" @click="exports">导出</Button> -->
                </div>
            </div>
            <div class="acea-row mb20">
                <div
                    class="infoBox acea-row mb30"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <div
                        class="iconCrl mr15"
                        :class="{
                            one: index % 4 == 0,
                            two: index % 4 == 1,
                            three: index % 4 == 2,
                            four: index % 4 == 3,
                        }"
                    >
                        <i :class="item.icon" class="iconfont"></i>
                    </div>
                        <div class="info">
                        <span class="sp1" v-text="item.name"></span>
                        <span
                            class="sp2"
                            v-if="index === list.length - 1"
                            v-text="item.num"
                        ></span>
                        <span class="sp2" v-else v-text="item.num"></span>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import {
  moduleGetBasic
} from "@/api/statistic";
import { formatDate } from "@/utils/validate";
   export default{
        data(){
            return{
                 spinShow: false,
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 8,
                    sm: 24,
                    xs: 24,
                },
                options: this.$timeOptions,
                name: "近30天",
                timeVal: [],
                dataTime: "",
                list: [],
                optionData: {},
                style: { height: "400px" },
            }
        },
        created() {
            const end = new Date();
            const start = new Date();
            start.setTime(
              start.setTime(
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate() - 29
                )
              )
            );
            this.timeVal = [start, end];
            this.dataTime =
              formatDate(start, "yyyy/MM/dd") + "-" + formatDate(end, "yyyy/MM/dd");
        },  
        mounted() {
            this.getStatistics();
        },
        methods:{
            // 具体日期
            onchangeTime(e) {
                this.timeVal = e;
                this.dataTime = this.timeVal.join("-");
            },
            onSeach() {
                 this.getStatistics();
            },
            getStatistics() {
                moduleGetBasic({ data: this.dataTime })
                    .then(async (res) => {
                    const cardLists = res.data;
                    this.list = [
                            {
                            name: "治疗记录访问用户数",
                            icon: "iconshangpinliulanliang",
                            num: cardLists.zl_people,
                            },
                            {
                            name: "治疗记录访问浏览数",
                            icon: "iconshangpinliulanliang",
                            num: cardLists.zl_browse,
                            },
                            {
                            name: "剩余记录访问用户数",
                            icon: "iconshangpinfangkeshu",
                            num: cardLists.sy_people,
                            },
                            {
                            name: "剩余记录访问量",
                            icon: "iconshangpinfangkeshu",
                            num: cardLists.sy_browse,
                            },
                        ];
                    })
                    .catch((res) => {
                    this.$Message.error(res.msg);
                    });
                },
        }
   }
</script>

<style scoped>
.one {
  background: #1890ff;
}
.two {
  background: #00c050;
}
.three {
  background: #ffab2b;
}
.four {
  background: #b37feb;
}
.up,
.el-icon-caret-top {
  color: #f5222d;
  font-size: 12px;
  opacity: 1 !important;
}

.down,
.el-icon-caret-bottom {
  color: #39c15b;
  font-size: 12px;
}
.curP {
  cursor: pointer;
}
.header {
  &-title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
  &-time {
    font-size: 12px;
    color: #000000;
    opacity: 0.45;
  }
}

.iconfont {
  font-size: 16px;
  color: #fff;
}

.iconCrl {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  opacity: 0.7;
}

.lan {
  background: #1890ff;
}

.iconshangpinliulanliang {
  color: #fff;
}

.infoBox {
  width: 20%;
  @media screen and (max-width: 1300px) {
    width: 25%;
  }
  @media screen and (max-width: 1200px) {
    width: 33%;
  }
  @media screen and (max-width: 900px) {
    width: 50%;
  }
}

.info {
  .sp1 {
    color: #666;
    font-size: 14px;
    display: block;
  }
  .sp2 {
    font-weight: 400;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.85);
    display: block;
  }
  .sp3 {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    display: block;
  }
}
</style>